<script setup lang="ts">
  import {useRouter} from "vue-router";
  import {onMounted, ref} from "vue";
  import {getCurrentUser} from "../services/user.ts";

  let user = ref();

  onMounted(async () => {
    const res = await getCurrentUser();
    if (res) {
      user.value = res;
    }
  })

  const router = useRouter();

  const toEdit = (editUserId: number, editKey: string, editName: string, currentValue: string) => {
    router.push({
      path: `/user/edit`,
      query: {
        editKey,
        editName,
        currentValue,
        editUserId
      }
    })
  }
</script>

<template>
  <div v-if="user">
    <van-cell title="昵称" is-link to="/user/edit" :value="user.userName" @click="toEdit(user.id, 'userName', '昵称', user.userName)"/>
    <van-cell title="账号" :value="user.loginName"  @click="toEdit(user.id, 'loginName', '账号', user.loginName)"/>
    <van-cell title="头像" is-link to="/user/edit" :value="user.avatarUrl" @click="toEdit(user.id, 'avatarUrl', '头像', user.avatarUrl)">
      <img :src="user.avatarUrl" style="height: 48px;"  alt=""/>
    </van-cell>
    <van-cell title="性别" is-link :value="user.gender" @click="toEdit(user.id, 'gender', '性别', user.gender)"/>
    <van-cell title="电话" is-link to="/user/edit" :value="user.phone"  @click="toEdit(user.id, 'phone', '电话', user.phone)"/>
    <van-cell title="邮箱" is-link to="/user/edit" :value="user.email"  @click="toEdit(user.id, 'email', '邮箱', user.email)"/>
    <van-cell title="注册时间" :value="user.createTime.toLocaleString()" />
  </div>
  <van-empty v-if="!user" description="用户未登录"/>
</template>

<style scoped>

</style>